<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>邮件列表 - 科帮网</title>
    <meta name="author" content="小柒2012" />
    <meta name="site" content="https://blog.52itstyle.com" />
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
	<script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
	<script th:src="@{/layer/layer.js}" type="text/javascript"></script>
	<script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
	<script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
	[v-cloak] {
			  display: none;
			}
	</style>
</head>
<body>
<div id="app" v-cloak>
       <div style="margin-bottom: 6px">
			<template >
			<i-input placeholder="输入邮件主题" v-model="mail.subject" style="width: 200px"></i-input>
			</template>
			<i-button type="primary"  icon="ios-search" @click="list()" >查询</i-button>
			<i-button type="primary"  icon="refresh" @click="reload()" >清空</i-button>
		</div>
		
		<template> 
			<i-table border  :content="self" :columns="tableTitle" :data="consultData"></i-table>
		 	<br>
			<!-- <Page :current="mail.pageNumber" :total="total" :page-size="mail.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page> --> 
		</template>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : '#app',
	data : {
		mail :{
			subject:""
		},
		tableTitle : [ {
			key : "receiveEmail",
			title : "接收人邮箱",
			width : "",
			}, {
			key : "subject",
			title : "主题",
			width : ""
		}, {
			key : "content",
			title : "发送内容",
			width : "",
        	render : function(h, params){
				var functionList = [];
				var see = h('Button', {
					props : {icon:"ios-search",type : 'primary',size : 'small'},
					attrs: {id: 'foo'},
					style : {width:'',marginLeft:'-10px',marginRight:'-10px',marginBottom:'1px',marginTop:'1px'},
					on : {
						click : function() {
							vm.see();
							vm.msg=params.row.content;
						}
					
					}
				}, '查看');
				functionList.push(see);
				// 返回方法集合
				return h('div', functionList);
		},
		}, {
			key : "template",
			title : "模板",
			width : ""
		}, {
			key : "sendTime",
			title : "发送时间",
			width : "",
			render: function (h, params) {  
	            return h('div',new Date(this.row.sendTime).Format('yyyy-MM-dd'));
	        }  
		},],
		consultData : [

		]
	},
	methods : {
		list : function() {
			 $.ajax({
				url : '../mail/list?_' + $.now(),
				type : "post",
				param : this.mail,
				success : function(result) {
					vm.consultData = result.msg;
				}
			});
		},
		reload : function(type) {
			this.list();
		},
		see: function(){
			dialogOpen({
				title: '内容',
				url: '/email/show.html?_' + $.now(),
				width: '850px',
				height: '550px',
				btn: null,
				scroll : true,
				success: function(iframeId){
					top.frames[iframeId].document.write(vm.msg);
				},
			});
		},
		initFormatter(){  
		      Date.prototype.Format = function(fmt) {
		        let o = {    
		            "M+" : this.getMonth()+1,                 //月份    
		            "d+" : this.getDate(),                    //日    
		            "h+" : this.getHours(),                   //小时    
		            "m+" : this.getMinutes(),                 //分    
		            "s+" : this.getSeconds(),                 //秒    
		            "q+" : Math.floor((this.getMonth()+3)/3), //季度    
		            "S"  : this.getMilliseconds()             //毫秒    
		        };    
		        if(/(y+)/.test(fmt))    
		            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));    
		        for(var k in o)    
		            if(new RegExp("("+ k +")").test(fmt))    
		             fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));    
		        return fmt;    
		      }  
	   }  
	},
	created : function() {
		this.list();
		this.initFormatter();
	}

});
</script>
</body>
</html>